<template>
  <el-dialog :title="upload.title + '导入'" :visible.sync="upload.open" width="400px" style="margin-top:8%;" append-to-body
    :before-close="closeDelDialog">
    <div style="height: 100%; line-height: 50px; overflow: hidden; padding: 15px">
      <el-upload class="upload-file-demo" action="上传的url" ref="uploadComp" :auto-upload="true" :show-file-list='true'
        :on-change="handleChange" :disabled="loading" accept="" :http-request="uploadFile" :file-list="fileList"
        :on-remove="handleRemove">
        <div style="width: 100%; display: flex">
          <el-button :loading="loading" type="primary" icon="el-icon-upload"
            style="padding: 0 10px; height: 40px">上传文件</el-button>
          <span style="margin-left: 2%; white-space: nowrap;" v-if="isShowTooltip">仅允许导入xls、xlsx格式文件。</span>
          <!-- //需要下载模板的情况下 -->

          <span v-else style="margin-left: 2%; white-space: nowrap;">仅允许导入{{ importType }}格式文件。</span>
          <!-- //不需要需要下载模板的情况下 -->

        </div>
      </el-upload>
      <el-link type="primary" :underline="false"
        style="height: 10%; font-size:12px;vertical-align: baseline; float: right; right: 1em" v-if="isShowTooltip"
        @click="importTemplate">下载模板</el-link>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFileForm">确 定</el-button>
      <el-button @click="closeDelDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import fileList from "@/components/FileUpload/fileList";
export default {
  name: "dataImport",
  props: {
    upload: {
      type: Object,
    },
    // 数据库接收传false 不需要提示和下载模板
    isShowTooltip: {
      type: Boolean,
      default: true
    },
    importType: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      loading: false,
      fileList: []
    }
  },
  methods: {
    closeDelDialog() {
      this.$refs.uploadComp.clearFiles();
      this.$emit("uploadCancel")
      this.fileList = []
    },
    // 文件上传 - 文件选中后上传
    handleChange(file, fileList) {
      /* 自动上传改成true会导致重复触发，所以在handleChange上传文件*/
      //  防抖
      this.fileList = []
      let length = fileList.length
      this.fileList = [fileList[length - 1]]
      this.fileLimit(file, fileList);
      this.maxLength = Math.max(length, this.maxLength)
      setTimeout(() => {
        if (length === this.maxLength) {
          // 你的上传文件逻辑
          this.$refs.uploadComp.submit();
          this.fileLimit(file, fileList);
        }
      }, 100)
    },
    //开始上传文件
    uploadFile(content) {
      var that = this;
      for (let i = 0; i < this.fileList.length; i++) {
        const extension = this.fileList[i].name.substring(this.fileList[i].name.lastIndexOf('.') + 1);
        if (this.isShowTooltip) {
          if (extension == 'xls' || extension == 'xlsx') {
            that.$emit("uploadFile", content)
          }
        } else {
          // 替换中文逗号为英文逗号
          var strWithCommas = this.importType.replace(/、/g, ',');
          // 使用split方法将字符串拆分为数组
          var arr = strWithCommas.split(',');
         
          if (arr.includes(extension)) {
            that.$emit("uploadFile", content)
          }
        }
      }
    },
    //限制上传附件
    fileLimit(file, fileList) {

      // 替换中文逗号为英文逗号
      var strWithCommas = this.importType.replace(/、/g, ',');
      // 使用split方法将字符串拆分为数组
      var arr = strWithCommas.split(',');
      const extension = file.name.substring(file.name.lastIndexOf('.') + 1);
      const size = file.size / 1024 / 1024;
      if (this.isShowTooltip) {  //有下载模版的情况下
        if (extension !== 'xls' && extension !== 'xlsx') {
          this.$message.warning('仅允许导入xls、xlsx格式文件')
          return
        }
      } else {
        if (!arr.includes(extension)) { //判断数组里面是否包含当前上传的文件类型
          this.$message.warning('仅允许导入' + this.importType + '格式文件')
          return
        }

      }

      // if (size > 5) {
      //     this.$message.warning("文件大小不得超过5M");
      //     return;
      // }
    },
    /** 下载模板操作 */
    importTemplate() {
      var that = this;
      that.$emit("importTemplate")
    },
    handleRemove() {
      this.fileList = []
    },
    // 提交上传文件
    submitFileForm() {


      // 替换中文逗号为英文逗号
      var strWithCommas = this.importType.replace(/、/g, ',');
      // 使用split方法将字符串拆分为数组
      var arr = strWithCommas.split(',');
      if (this.fileList.length == 0) {
        this.$message.warning('请先导入文件')
        return
      }
      for (let i = 0; i < this.fileList.length; i++) {
        const extension = this.fileList[i].name.substring(this.fileList[i].name.lastIndexOf('.') + 1);
        if (this.isShowTooltip) {
          if (extension !== 'xls' && extension !== 'xlsx') {
            this.$message.warning('仅允许导入xls、xlsx格式文件')
            return
          }
        } else {
          if (!arr.includes(extension)) { //判断数组里面是否包含当前上传的文件类型
            this.$message.warning('仅允许导入' + this.importType + '格式文件')
            return
          }
        }
      }
      this.$refs.uploadComp.clearFiles();
     
      this.$emit("submitFileForm") //如果返回false,不需要弹'导入匹配页' 组件importMatch
      this.fileList = []
    },
  }
}
</script>

<style lang="scss" scoped>
.upload-file-demo {
  width: 100%
}
</style>

